<template>
  <el-dialog :visible="transferDialogVisible" @close="close">
    <el-transfer v-model="value" :data="data" />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    transferDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: false
        })
      }
      return data
    }
    return {
      data: generateData(),
      value: [1, 4]
    }
  },
  methods: {
    close() {
      this.transferDialogVisible = false
      this.$emit('update:transferDialogVisible', false)
    },
    getCheckedKeys() {
      console.log(this.value)
    }
  }
}

</script>

<style >

</style>
